<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-migrate-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('.out-ul>li').bind('mouseover',function(){
					$('.inner-ul').show();
				});
				$('.out-ul>li').bind('mouseout',function(){
					$('.inner-ul').hide();
				});
			});
		</script>
		<style type="text/css">
			ul{
				border: 1px solid black;
			}
			*{
				list-style-type: none;
				text-align: center;
			}
			.li-head1{
				background: blue;
			}
			.li-head2{
				background: blue;
			}
			.li-head3{
				background: blue;
			}
			ul.out-ul>li{
				float: left;
				line-height: 50px;
				width:300px;
			}
			ul.inner-ul{
				float: left;
			}
			ul.inner-ul>li:hover{
				background-color: greenyellow;
			}
			.inner-ul{
				/*background: firebrick;*/
				display: none;
				padding: 0px;
				width:300px;
			}
			.inner-ul>li{
				line-height: 50px;
				/*height: 50px;*/
				float: left;
				width:300px;
			}
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<ul class="out-ul">
			<li><div class="li-head1">首页</div></li>
			<li><div class="li-head2">我的移动</div>
				<ul class="inner-ul">
					<li>话费查询</li>
					<li>充值</li>
					<li>宽带办理</li>
					<li>提升流量</li>
					<div class="clear"></div>
				</ul>
			</li>
			<li><div class="li-head3">IPHONE</div></li>
			<div class="clear"></div>
		</ul>
	</body>
</html>

